<template>
	<view class="carDealer-content">
		<view class="carDealer-content-header">
			<view class="carDealer-content-header-row">
				<view class="" style="text-align: center;position: relative;">
					<image class="carDealer-content-header-img" :src="dataInfo.usersInfo.imageurl" mode="scaleToFill">
					</image>
					<view class="carDealer-content-header-img-gz" v-if="false">
						<text v-if="dataInfo.usersInfo.follow==0"> + 关注</text>
						<text v-else>已关注</text>
					</view>
				</view>
				<view class="carDealer-content-header-content">
					<view class="carDealer-content-header-content-item">
						<view class="carDealer-content-header-content-item-name">
							{{dataInfo.usersInfo.users_name?dataInfo.usersInfo.users_name:''}}
						</view>
						<!-- <view class="carDealer-content-header-content-item-zl">
							资料
						</view> -->
					</view>
					<view v-if="dataInfo.usersInfo.identity==2" class="carDealer-content-header-content-item"
						style="justify-content: start;margin: 15rpx 0;" @click="openMap">
						<image class="carDealer-content-header-content-item-zb" src="../../../static/auth_location.png"
							mode="scaleToFill" style="height: 25px;"></image>
						{{dataInfo.usersInfo.company_address?dataInfo.usersInfo.company_address:''}}
					</view>
					<view class="">
						<text style="margin-right: 20px;">注册时长：{{dataInfo.usersInfo.register_time?dataInfo.usersInfo.register_time:''}}</text>
						<text v-if="dataInfo.usersInfo.member_start_time">会员时长：{{dataInfo.usersInfo.member_start_time}}</text>
					</view>
				</view>
			</view>
			<view class="carDealer-content-item2">
				<image class="carDealer-content-item2-img" :src="dataInfo.usersInfo.icon_url" mode="scaleToFill">
				</image>
				<view class="carDealer-content-item2-text">
					<text
						style="font-size: 16px;font-weight: bold;margin-right: 6px;">{{dataInfo.usersInfo.followCount}}</text>
					<text>被关注</text>
				</view>
			</view>
			<view class="carDealer-content-item2-text" v-if="dataInfo.usersInfo.brief">
				简介：{{dataInfo.usersInfo.brief?dataInfo.usersInfo.brief:''}}
			</view>
		</view>
		<view class="carDealer-content-select">
			<view style="width: 100%; height: 40px; position: relative;">
				<chenchuang-CCDropDownFilter :filterData='filterData' :defaultIndex='defaultIndex'
					:isinterval="interval" @onSelected='ed'></chenchuang-CCDropDownFilter>

			</view>
		</view>
		<template v-if="carData && carData.length">
			<scroll-view scroll-y="true" :style="'height:' + scroll_height+';top:'+scrollViewTop + 'px'"
				style="position: fixed;width: 100%;" :scroll-top="scrollTop" refresher-enabled
				:refresher-triggered="triggered" @refresherrefresh="onRefresh" @scrolltolower="lower">
				<view class="carDealer-content-list" style="margin-top: -20px;z-index: 99;margin-top: 10px;"
					v-for="(item,index) in carData" :key="index" @click="carHandler(item)">
					<view class="carDealer-content-list-item">
						<view class="carDealer-content-list-item-name">
							{{item.cars_name?item.cars_name:''}}
						</view>

					</view>
					<view class="">
						{{item.cars_type?item.cars_type:''}} {{item.appearance_interior?item.appearance_interior:''}}
					</view>
					<view class="carDealer-content-list-item-last"
						style="display: flex;justify-content: space-between;align-items: center;">
						<view class="">
							<text v-if="item.procedures_name">{{item.procedures_name}} |</text>
							<text v-if="item.sales_area">{{item.sales_area}}|</text>
							<text v-if="item.location_nam">{{item.location_nam}}</text>
						</view>
						<view class="carDealer-content-list-item-price" style="min-width: 100px;text-align: center;">
							售价:{{item.price?item.price:0}}万
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<template v-else>
			<view class="" style="display: flex;justify-content: center;margin-top: 80px;">
				<image src="../../static/nodata.png" mode="" style="width: 200px;height: 220px;"></image>
			</view>
		</template>


		<view class="" style="height: 90px;">
		</view>
		<view class="carDealer-content-btn">
			<view class="" @click="followHandler">
				<image v-if="dataInfo.usersInfo.follow==0" class="carDealer-content-btn-img"
					src="../../../static/me_guanzhu.png" mode=""></image>
				<image v-else-if="dataInfo.usersInfo.follow==1" class="carDealer-content-btn-img"
					src="../../../static/guanzhu.png" mode=""></image>
				<view class="">
					{{dataInfo.usersInfo.follow==0?'关注':'已关注'}}
				</view>
			</view>
			<button type="primary" @click="telHandler" style="background-color: #007aff;">电话咨询</button>
		</view>
		<uni-popup ref="popup" type="bottom">、
			<view class="pop-content">
				<view class="pop-content-title">
					拨打电话
				</view>
				<view class="pop-content-note">
					点击后拨打您的电话，商家可见
				</view>
				<view class="pop-content-tel" v-for="(item,index) in dataInfo.contactSeller" :key="index"
					@click="ringTel(item.mobile)">
					<view class="">
						{{item.name}}
					</view>
					<view class="">
						{{item.mobile}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getDealerInfo,
		getNewCarList,
		getOldCarList,
		followShop,
		getSelctData
	} from "@/api/dealer.js"
	import { getUsedCarDetails } from "@/api/secondhandCar.js";
	export default {
		data() {
			return {
				triggered: false,
				scroll_height: "calc(100vh - 132px)",
				scrollTop: 0,
				seriesId: "",
				carType: 1,
				firstV: "",
				secondV: '',
				thirdV: '',
				interval: false,
				filterData: [
					[{
						name: '新车',
						value: '' //1
					}, {
						name: '二手车',
						value: '2'
					}],
					[{
						name: '全部车系',
						value: ''
					}, ]
					// [{
					// 	name: '全部车型',
					// 	value: ''
					// }, ]
				],
				defaultIndex: [0, 0],
				page_num: 15,
				page: 1,
				userData: {},
				position: '',
				shopId: '',
				dataInfo: {
					usersInfo: {}
				},
				carData: [],
				selectData: [],
				endName:''
			}
		},
		watch: {
			firstV(val) {
				if (val) {
					this.carType = 2
					this.getOldList()
				} else {
					this.carType = 1
					this.getNewData()
				}
				this.getConditionData()
			},
			secondV(val) {
				if (val) {
					this.interval = false
					const findData = this.selectData.find(item => item.id == val)
					let cityArr = findData.children
					let tmpArr = this.filterData;
					// for (let s of cityArr) {
					// 	if (s.id) {
					// 		tmpArr[2].push({
					// 			name: s.name,
					// 			value: s.id
					// 		});
					// 	}
					// }
					this.filterData =
						tmpArr;
					setTimeout(() => {
						this.interval = true
					}, 200)
					this.seriesId = val
					if (this.carType == 1) {
						this.getNewData()
					} else {
						this.getOldList()
					}
				} else {
					this.interval = false
					let tmpArr = this.filterData;
					// tmpArr[2] = [{
					// 	name: '全部车型',
					// 	value: ''
					// }, ];
					this.filterData = tmpArr;
					setTimeout(() => {
						this.interval = true
					}, 200)
					this.seriesId = val
					if (this.carType == 1) {
						this.getNewData()
					} else {
						this.getOldList()
					}
				}
			},
			thirdV(val) {
				this.seriesId = val
				if (this.carType == 1) {
					this.getNewData()
				} else {
					this.getOldList()
				}
			},
		},
		methods: {
			//下拉刷新
			onRefresh() {
				// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
				setTimeout(() => {
					this.page = 1;
					this.isRefresher = true;
					if (this.carType == 2) {
						this.getOldList()
					} else if (this.carType == 1) {
						this.getNewData()
					}
				}, 800);
			},
			// 上拉加载
			lower() {
				this.page_num += 10
				if (this.carType == 2) {
					this.getOldList()
				} else if (this.carType == 1) {
					this.getNewData()
				}
			},
			carHandler: function(data) {
				const that = this
				if(this.carType == 1){
					uni.navigateTo({
						url: "/pages/home/newCar/newCarDetail/newCarDetail?id=" + data.id
					})
				}else if(this.carType == 2){
					//二手车
					getUsedCarDetails(data.id, this.users_id, this.endName).then((res) => {
					  if (res.code == 0) {
					    that.dataObject = res.data;
					    uni.navigateTo({
					      url:
					        "/secondhandCar/secondhandCarDetails/secondhandCarDetails?carId=" +
					        data.id +
					        "&isContent=" +
					        true,
					      events: {
					        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					        acceptDataFromOpenedPage: function (data) {
					          that.$utils.log(
					            "打印返回数据 acceptDataFromOpenedPage  " +
					              JSON.stringify(data)
					          );
					        },
					        someEvent: function (data) {
					          that.$utils.log(
					            "打印返回数据 someEvent   " + JSON.stringify(data)
					          );
					        },
					      },
					      success: function (res) {
					        that.$utils.log(
					          "打印发送数据 success   " + JSON.stringify(that.dataObject)
					        );
					        // 通过eventChannel向被打开页面传送数据
					        res.eventChannel.emit(
					          "acceptDataFromOpenerPage",
					          that.dataObject
					        );
					      },
					      fail: function (error) {
					        that.$utils.log("打印发送数据 fail   " + JSON.stringify(error));
					      },
					    });
					  } else {
					    uni.showToast({
					      title: res.message,
					      icon: "none",
					    });
					  }
					});
				}
		
			},
			followHandler: function() {
				if (this.userData && this.userData.id) {
					followShop({
						users_id: this.userData.id,
						shop_users_id: this.position
					}).then(res => {
						this.getInfo()
					})
				} else {
					uni.showModal({
						title: "当前未登录，是否前去登录？",
						cancelText: "否",
						confirmText: "是",
						success() {
							uni.navigateTo({
								url: '/pages/login/login',
							})
						}
					})

				}


			},
			openMap: function() {
				// #ifdef  MP
				if (this.dataInfo.usersInfo.lat) {
				  uni.openLocation({
				    latitude: Number(this.dataInfo.usersInfo.lat),
				    longitude: Number(this.dataInfo.usersInfo.long),
				    success: function (res) {},
				    fail: function (e) {},
				  });
				}
				// #endif
				// uni.navigateTo({
				// 	url: `/pages/home/carDealer/myMap/myMap?long=${this.dataInfo.usersInfo.long}&lat=${this.dataInfo.usersInfo.lat}`,
				// });
			},
			change(e) {
			},
			telHandler: function() {
				this.$refs.popup.open('bottom')
			},
			ringTel: function(tel) {
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
			getNewData: function() {
				this.triggered = true
				getNewCarList(this.position, this.seriesId, this.page_num, this.page).then(res => {
					this.carData = res.data.data
					this.triggered = false
				})
			},
			getOldList: function() {
				this.triggered = true
				getOldCarList(this.position, this.seriesId, this.page_num, this.page).then(res => {
					this.carData = res.data.data
					this.triggered = false
				})
			},
			moreData: function() {
				this.page_num += 10
				//新车还是二手车
				this.getNewData()
			},
			getConditionData: function() {
				getSelctData(this.userData.id, this.carType).then(res => {
					this.selectData = res.data
					this.interval = false
					let cityArr = this.selectData
					let tmpArr = this.filterData;
					
					tmpArr[1] = []
					for (let s of cityArr) {
						// if (s.id) {
						tmpArr[1].push({
							name: s.name,
							value: s.id
						});
						// }
					}
					this.filterData =
						tmpArr;
					setTimeout(() => {
						this.interval = true
						
						this.$forceUpdate()
					}, 200)
				})
			},
			ed(res) {
				this.firstV = res[0][0].value;
				this.secondV = res[1][0].value;
				// this.thirdV = res[2][0].value;
			},
			getInfo: function() {
				getDealerInfo(this.userData.id, this.position).then(res => {
					this.dataInfo = res.data;
				})
			}
		},
		mounted() {

		},
		onLoad(options) {
			this.position = options.position
			const userData = uni.getStorageSync("login")
			this.userData = userData
			//新车
			this.getInfo()
			this.getNewData()
			this.getConditionData()
		}
	}
</script>

<style scoped lang="scss">
	.carDealer-content {
		font-size: 12px;

		&-header {
			margin: 10px;
			background-color: #fff;
			border-radius: 8px;
			padding: 15px 10px;

			&-row {
				display: flex;
				justify-content: space-between;
			}

			&-img {
				width: 55px;
				height: 55px;
				margin-right: 10px;
				border-radius: 50%;

				&-gz {
					background-color: #2D56C5;
					color: #fff;
					width: 80%;
					position: absolute;
					top: 42px;
					left: 4px;
					border-radius: 10px;
					padding: 2px 5px;
					font-weight: bold;
				}
			}

			&-content {
				flex: 1;

				&-item {
					display: flex;
					justify-content: space-between;
					line-height: 20px;

					&-name {
						font-size: 15px;
						font-weight: bold;
					}

					&-zl {
						color: #2D56C5;
						border: 1px solid #2D56C5;
						padding: 3px 10px;
						border-radius: 10px;
					}

					&-zb {
						width: 20px;
						height: 20px;
						margin-right: 10px;
					}
				}

			}

		}

		&-item2 {
			margin: 10px;
			display: flex;
			justify-content: space-between;

			&-img {
				width: 65px;
				height: 21px;
			}

			&-text {
				margin-top: 10px;
				margin-left: 65px;
			}
		}

		&-select {
			margin: 10px;
			display: flex;
			color: rebeccapurple;
			margin-top: 15px;
			height: 60px;
			margin-bottom: -10px;

			&-item {
				width: 100px;

				&:last-child {
					margin-left: 20px;
				}
			}
		}

		&-list {
			margin: 10px;
			background-color: #fff;
			border-radius: 8px;
			padding: 15px 10px;
			line-height: 25px;

			&-item {
				display: flex;
				justify-content: space-between;

				&-name {
					font-size: 15px;
					font-weight: bold;
				}

				&-price {
					font-size: 15px;
					font-weight: bold;
					color: #EC4B4B;
				}

				&-last {
					color: #999999;
					font-size: 10px;
				}
			}

		}

		&-btn {
			position: fixed;
			bottom: 0;
			height: 60px;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			width: 100%;
			align-items: center;
			text-align: center;

			&-img {
				width: 43rpx;
				height: 38rpx;
				margin-right: 45px;
				margin-left: 45px;
			}

			button {
				flex: 1;
				margin-right: 30rpx;
			}
		}
	}

	.pop-content {
		background-color: #fff;
		padding: 20px;
		border-radius: 10px 10px 0 0;
		text-align: center;

		&-title {
			font-weight: bold;
			font-size: 16px;
		}

		&-note {
			font-size: 12px;
			color: #999999;
			line-height: 25px;
		}

		&-tel {
			display: flex;
			justify-content: center;
			gap: 30rpx;
			color: #2D56C5;
			line-height: 40px;
			font-size: 32rpx;
			border-bottom: 1px solid #eee;
		}
	}

	page {

		background-color: '#F6F7FA';
	}

	.content {
		display: flex;
		flex-direction: column;
		/* background-color: white; */

	}

	.mui-content-padded {
		margin: 6px 14px;
		/* background-color: #ffffff; */
	}

	.lineV {

		margin-top: 0px;
		margin-left: 15px;
		width: calc(100vw - 30px);
		height: 1px;
		background-color: #F5F5F5;

	}

	.hotSearchTitV {
		margin-left: 14px;
		margin-top: 4px;
		width: 170px;
		height: 22px;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #161616;
		line-height: 22px;
	}

	.upView {
		display: flex;
		flex-direction: row;
		height: 26px;
		margin-left: 0px;
	}

	.cellView {
		margin-top: 4px;
		margin-left: 5.8px;
		height: 18px;
		line-height: 18px;
		text-align: center;
		border-radius: 2px;
		padding: 0px 4px !important;
		font-size: 10px;

		background-color: #f5f5f5;
		color: #818183;
	}

	.moreBtn {
		height: 30px;
		/* background-color: #F5F5F5; */
		text-align: center;
		font-size: 12px;
		line-height: 30px;
		color: #888888;
	}

	.scroll-Y {
		height: calc(100% - 240px);
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>